import React, { Component,lazy } from 'react'
import { Route ,Switch,Redirect} from 'react-router-dom'
import { Button } from 'antd-mobile'
import './App.less'
import PrivateRoute from './utils/PrivateRoute'

// import Index from './pages/Index/Index'
// import Login from './pages/Login/Login'
// import Register from './pages/Register/Register'
// import List from './pages/List/List'
// import Detail from './pages/Detail/Detail'
// import Search from './pages/Search/Search'

// 懒加载
const Index=lazy(()=>import('./pages/Index/Index'))
const Login=lazy(()=>import('./pages/Login/Login'))
const Register=lazy(()=>import('./pages/Register/Register'))
const List=lazy(()=>import('./pages/List/List'))
const Detail=lazy(()=>import('./pages/Detail/Detail'))
const Search=lazy(()=>import('./pages/Search/Search'))
const Coupon=lazy(()=>import('./pages/Coupon/Coupon'))

export default class App extends Component {
  render() {
    return (
      <div className='page'>
        <React.Suspense fallback={<div>正在努力加载中...</div>}>
        {/* 路由视图 */}
        <Switch>
          {/* 路由规则 */}
          {/* 登录 */}
          <Route path='/login' component={Login}></Route>
          {/* 注册 */}
          <Route path='/register' component={Register}></Route>
          {/* 首页 */}
          <PrivateRoute path='/index' component={Index}></PrivateRoute>
          {/* 列表 */}
          <Route path='/list' component={List}></Route>
          {/* 详情 */}
          <Route path='/detail/:type/:id' component={Detail}></Route>
          {/* 搜索 */}
          <Route path='/search' component={Search}></Route>
          <Route path="/coupon" component={Coupon}></Route>

          {/* 重定向 */}
          <Redirect to='/login'></Redirect>
        </Switch>
        </React.Suspense>
      </div>
    )
  }
}
